<template>
	<div class="common-layout">
	    <el-container>
			<el-header><Header></Header></el-header>
			<el-main v-if="target==false">
				<h3>结算周期</h3>
				<el-form :model="form" label-width="auto" style="width: 100%;margin: 15px 0;" class="item1">
					<el-form-item label="结算时间" label-width="90">
						<div class="block">
						    <el-date-picker 
								style="width:220px"
								v-model="timevalue1"
								type="datetimerange"
								range-separator="To"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								clearable
						    />
						</div>
					</el-form-item>
					<el-form-item label="发放时间" label-width="90">
						<div class="block">
						    <el-date-picker 
								style="width:220px"
								v-model="timevalue2"
								type="datetimerange"
								range-separator="To"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								clearable
						    />
						</div>
					</el-form-item>
					<el-form-item label="结算状态" label-width="90">
						<el-select v-model.number="form.summaryStatus" placeholder="请选择结算状态" style="width: 240px" clearable>
							<el-option label="未结算" :value="0" />
							<el-option label="已结算" :value="1" />
						</el-select>
					</el-form-item>
					<el-form-item label="发放状态" label-width="90">
						<el-select v-model="form.grantStatus" placeholder="请选择发放状态" style="width: 240px" clearable>
							<el-option label="未发放" :value="'0'"/>
							<el-option label="已发放" :value="'1'" />
						</el-select>
					</el-form-item>
					<el-button type="primary" style="margin-left: 15px;" @click="search">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form>
				<el-table style="width: 100%" :data="tableData" ref="multipleTableRef" height="50vh">
					<el-table-column prop="rewardType" label="结算类型"/>
					<el-table-column prop="cycleStartTime" label="开始时间" width="110"/>
					<el-table-column prop="cycleEndTime" label="结束时间" width="110"/>
					<el-table-column prop="totalMoney" label="销售金额"/>
					<el-table-column prop="rewardMoney" label="奖励金额"/>
					<el-table-column prop="summaryStatus" label="结算状态"/>
					<el-table-column prop="grantStatus" label="发放状态"/>
					<el-table-column prop="summaryTime" label="结算时间"/>
					<el-table-column prop="grantTime" label="发放时间"/>
					<el-table-column label="操作" width="130">
						<template #default="record">
							<a class="mya" @click="checkDetail(record.row)">查看明细</a>
							<a class="mya" v-if="record.row.show==0" @click="showDialog(record.row)">发放</a>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage"
				></el-pagination>
			</el-main>
			<el-main v-if="target==true">
				<div style="display: flex;align-items: center;margin-bottom: 20px;">
				        <span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
				            <el-icon><ArrowLeft /></el-icon>
				            <span @click="goback">返回</span>
				            <span style="margin-left: 10px;">|</span>
				        </span>
				        <h3>奖励明细</h3>
				    </div>
				<!-- <span @click="back" style="padding: 0 15px;"><el-icon><ArrowLeft /></el-icon>返回</span>
				<h3 ></h3> -->
				<el-table style="width: 100%;margin-top: 20px;" :data="tableData2" ref="multipleTableRef" height="65vh">
					<el-table-column prop="rewardType" label="会员信息"/>
					<el-table-column prop="cycleStartTime" label="开始时间" width="110"/>
					<el-table-column prop="cycleEndTime" label="结束时间" width="110"/>
					<el-table-column prop="totalMoney" label="销售金额"/>
					<el-table-column prop="rewardMoney" label="奖励金额"/>
					<el-table-column prop="summaryStatus" label="结算状态"/>
					<el-table-column prop="grantStatus" label="发放状态"/>
					<el-table-column prop="summaryTime" label="结算时间"/>
					<el-table-column prop="grantTime" label="发放时间"/>
				</el-table>
				<el-pagination
					layout="prev,pager,next"
					:page-count="total2"
					:page-size="pageSize"
					v-model:current-page="pageIndex"	
					@current-change="changePage2"
				></el-pagination>
			</el-main>
	    </el-container>
	</div>
	<!-- 发放 -->
	<el-dialog
		v-model="dialogVisible"
	    title="提示"
	    width="500"
		align-center
		>
		<div style="text-align: center;">
			是否确认发放奖励
		</div>
		
	    <template #footer>
			<div class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="define">
					确定
				</el-button>
			</div>
	    </template>
	</el-dialog>
</template>

<script setup>
	import Header from "@/components/Header.vue"
	import { onMounted, ref, reactive} from 'vue';
	import {CycleList,CycleSearch,CheckDetail,Grant} from "@/api"
	import { Plus ,ArrowLeft} from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
	
	let target=ref(false)
	let pageIndex=ref(1);
	let pageSize=5;
	let total=ref(0);
	let total2=ref(0);
	let timevalue1=ref()
	let timevalue2=ref()
	let form=reactive({
		siteId:Number(sessionStorage.getItem("siteId")),
		pageIndex:pageIndex.value,
		pageSize:pageSize,
		summaryStartTime:"",
		summaryEndTime:"",
		grantStartTime:"",
		grantEndTime:"",
		summaryStatus:"",
		grantStatus:"",
	})
	
	// 列表
	let tableData = ref([])
	const cycleList=async()=>{
		let res = await CycleList({
			pageIndex:pageIndex.value,
			pageSize:pageSize,
			siteId:1
		})
		// console.log("res",res.list)
		res.list.forEach(a=>{
			if(a.grantStatus=="未发放"){
				a.show=0
			}
		})
		tableData.value=res.list
		// console.log(tableData)
		total.value=res.pageCount
	}
	
	// 查看明细
	let tableData2 = ref([])
	const checkDetail=async(cycleid)=>{
		target.value=true;
		// console.log("cycleid",cycleid.cycleId)
		sessionStorage.setItem("cycleid",cycleid.cycleId)
		let res = await CheckDetail({
			cycleId:sessionStorage.getItem("cycleid"),
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		// console.log("明细",res)
		tableData2.value=res.list
		total2.value=res.pageCount
	}	
	// 搜索
	const search=async()=>{
		if(timevalue1.value){
			let startdata = timevalue1.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let startdataTime = timevalue1.value[0].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let startTime = startdata + " " + startdataTime
			let enddata = timevalue1.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let enddataTime = timevalue1.value[1].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let endtTime = enddata + " " + enddataTime
			form.summaryStartTime = startTime
			form.summaryEndTime = endtTime
		}
		if(timevalue2.value){
			let startdata = timevalue2.value[0].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let startdataTime = timevalue2.value[0].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let startTime = startdata + " " + startdataTime
			let enddata = timevalue2.value[1].toLocaleString().split(" ")[0].replace(/\//g, '-')
			let enddataTime = timevalue2.value[1].toLocaleString().split(" ")[1].replace(/:/g, '-')
			let endtTime = enddata + " " + enddataTime
			form.grantStartTime = startTime
			form.grantEndTime = endtTime
		}
		let data = {}
		for( let key in (form)){
			if(form[key] ){
				// console.log(form[key])
				data[key] = form[key]
			}
		}
		let res = await CycleSearch(data)
		// console.log("form",res)
		tableData.value=res.list
		total.value=res.pageCount
	}
	
	// 重置
	const reset=()=>{
		timevalue1.value=''
		timevalue2.value=''
		form.summaryStatus=""
		form.grantStatus=""
		cycleList()
	}
	
	// 发放
	const dialogVisible = ref(false)
	let cId = ref()
	const showDialog=(cid)=>{
		cId.value=cid.cycleId
		// console.log("cId",cId)
		dialogVisible.value=true
	}
	// 发放确认
	const define=async()=>{
		let res = await Grant({
			cycleId:cId.value
		})
		if(typeof(res)=="object"){
			ElMessage({
				message:"发放成功",
				type:"success"
			})
		}
		cycleList()
		dialogVisible.value=false
	}
	
	// 返回
	const back=()=>{
		target.value=false
	}
	const changePage=(page)=>{
		pageIndex.value=page;
		search()
	}
	const changePage2= async(page)=>{
		pageIndex.value=page;
		// checkDetail()
		let res = await CheckDetail({
			cycleId:sessionStorage.getItem("cycleid"),
			pageIndex:pageIndex.value,
			pageSize:pageSize
		})
		// console.log("明细",res)
		tableData2.value=res.list
		total2.value=res.pageCount
	}
	
	
	
	onMounted(()=>{
		cycleList()
	})
</script>

<style scoped lang="less">
	.common-layout{
		background: #f2f3f5;
		.el-header{
			padding:0 !important;
			height: 10vh;
		}
		.el-main{
			height: 86vh;
			width: 98%;
			background: #fff;
			margin: 10px auto;
			.top{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;
			}
			
		}
		.item1{
			margin-top: 30px;
			display: flex;
			flex-wrap: wrap;
		}
		.mya{
			color: #4b5db9;
			margin:0 4px;
			cursor: pointer;
		}
	}
</style>